<!DOCTYPE html>
<html>

<head>
	<meta charset="UTF-8">
	<title>地震局培训平台</title>
	<!--<link rel="stylesheet" href="bootstrap/css/bootstrap.css" />-->
	<link rel="stylesheet" href="style/main.css" />
	<link rel="stylesheet" href="style/train.css" />
</head>

<body>
	<div id="info">
		<div class="info">
			<div class="newsbox">
				<!--消息滚动-->
				<div class="news nowrap">消息：欢迎加入地震应急志愿者培训平台，您是第123456位访问用户。</div>
			</div>
			<div class="infobox">
				<div class="name nowrap">zhangming</div>
				<div class="info_id nowrap">N.8784547</div>
				<div class="sign_out">退出</div>
			</div>
			<div class="leave_m">互动留言</div>
		</div>
	</div>
	<div id="show">
		<nav id="nav">
			<div class="top">
				<div class="logo"></div>
				<div class="seachbox">
					<input type="text" id="search" value="在线课堂搜索" />
					<div class="weibo codeIcon">
						<div class="first">
							<img src="image/weiboCode.png" />
						</div>
					</div>
					<div class="weixin codeIcon">
						<div class="first">
							<img src="image/weixinCode.png" />
						</div>
					</div>
				</div>
			</div>
			<div class="border">
				<ul class="nav">
					<li data-url="index">首页</li>
					<li data-url="news">新闻资讯</li>
					<!--<li data-url="story">志愿故事</li>-->
					<li class="team">志愿品牌
						<div class="first">
							<div data-url="story">志愿故事</div>
							<div data-url="team">志愿团体</div>
							<div data-url="star">志愿之星</div>
						</div>
					</li>
					<!--<li data-url="project">志愿项目</li>
						<li data-url="star">志愿之星</li>-->
					<li class="in" data-url="train">培训平台</li>
					<li data-url="policy">志愿政策</li>
				</ul>
			</div>
		</nav>
		<div id="content">
			<div class="top">
				<div class="t_left">
					<div class="headbox">
						<div class="head"></div>
					</div>
					<div class="name">用户名称</div>
					<div class="grade">五星志愿者
						<div class="grade_icon"></div>
					</div>
				</div>
				<div id="banner">
					<div class="banner">
						<div class="pic">
							<img src="image/t_banner.jpg" />
						</div>
						<div class="pic">
							<img src="image/t_banner2.jpg" />
						</div>
						<div class="pic">
							<img src="image/t_banner.jpg" />
						</div>
						<div class="pic">
							<img src="image/t_banner2.jpg" />
						</div>
					</div>
					<div class="picBtn">
						<div class="btn1 dot"></div>
						<div class="btn2 dot"></div>
						<div class="btn3 dot"></div>
						<div class="btn4 dot"></div>
					</div>
				</div>
			</div>
			<div class="middle">
				<div class="m_left">
					<div class="m_top">
						<div class="list">
							<div class="item" data-url="exam.html"></div>
							<div class="item" data-url="check.html"></div>
							<div class="item" data-url="map.html"></div>
							<div class="item" data-url="print.html"></div>
						</div>
					</div>
					<div class="m_bottom">
						<div class="navbox">
							<div class="firstbox">
								<div class="first">学习导航</div>
								<div class="secondbox">
									<div class="second" data-url="train2.html">医疗救护</div>
									<div class="second" data-url="store2.html">应急技能</div>
									<div class="second" data-url="store3.html">减灾科普</div>
									<div class="second" data-url="store4.html">心理教室</div>
								</div>
							</div>
							<div class="firstbox">
								<div class="first" data-url="tips.html">课程提醒</div>
								<!--<div class="secondbox">
										<div class="second">医疗救护</div>
										<div class="second">医疗救护</div>
										<div class="second">医疗救护</div>
										<div class="second">医疗救护</div>
									</div>-->
							</div>
							<div class="firstbox">
								<div class="first" data-url="store.html">课程超市</div>
								<!--<div class="secondbox">
										<div class="second">医疗救护</div>
										<div class="second">医疗救护</div>
										<div class="second">医疗救护</div>
										<div class="second">医疗救护</div>
									</div>-->
							</div>
							<div class="firstbox">
								<div class="first" data-url="exam.html">在线考试</div>
								<!--<div class="secondbox">
										<div class="second">医疗救护</div>
										<div class="second">医疗救护</div>
										<div class="second">医疗救护</div>
										<div class="second">医疗救护</div>
									</div>-->
							</div>
							<div class="firstbox">
								<div class="first" data-url="myCourse.html">我的课程</div>
								<!--<div class="secondbox">
										<div class="second">医疗救护</div>
										<div class="second">医疗救护</div>
										<div class="second">医疗救护</div>
										<div class="second">医疗救护</div>
									</div>-->
							</div>
							<div class="firstbox">
								<div class="first" data-url="download.html">资料下载</div>
								<!--<div class="secondbox">
										<div class="second">医疗救护</div>
										<div class="second">医疗救护</div>
										<div class="second">医疗救护</div>
										<div class="second">医疗救护</div>
									</div>-->
							</div>
						</div>
					</div>
				</div>
				<div class="m_right">
					<iframe id="iframe" src="exam.html" height="100%" width="100%" frameborder="0" scrolling="no"></iframe>
				</div>
			</div>
			<div class="bottom">
				<div class="title"></div>
				<div class="list" id="listall">
					 <!--<div class="img"></div>
					<div class="img"></div>
					<div class="img"></div>
					<div class="img"></div>
					<div class="img"></div> -->
				</div>
			</div>
		</div>
	</div>

	</div>
	<div id="bottom">
		<ul class="border">
			<li>相关协作单位：</li>
			<li>中国红十字会</li>
			<li>中科院心理所</li>
			<li>中国地震信息网</li>
			<li>中国地震科普网</li>
			<li>北京市地震局科普网 </li>
			<li>科普网</li>
		</ul>
		<div class="bottom">
			<ul class="one">
				<li>设为首页</li>
				<li>交换链接</li>
				<li>关于我们</li>
				<li>联系我们</li>
				<li>常见问题</li>
				<li>心理教室</li>
				<li>党团建设</li>
			</ul>
			<ul class="two">
				<li>主办：北京市地震局</li>
				<li>版权所有 京ICP备08988239</li>
				<li>技术支持：中宣助力传媒</li>
			</ul>
		</div>
	</div>
	<script type="text/javascript" src="script/jquery.min.js"></script>
	<script type="text/javascript" src="script/ishoock.tools.js"></script>
	<script type="text/javascript" src="script/main.js"></script>
	<script type="text/javascript" src="script/common.js"></script>
	<script>
		var index = 1,
			pre, num, timer;
		var play = true;
		var a = $("#banner .banner").children();
		var b = $("#banner .picBtn").children();
		Run();
		
		var first=location.getQuery("first");
		var second=location.getQuery("second");
		$(function () {
			
			isOpenNav();//判断是否需要打开导航
			
			
			$(".m_top .item").on("mouseover", function () {
				$(this).in();
			});
			$(".m_top .item").on("mouseleave", function () {
				$(".m_top .item").removeIn();
			});
			$(".m_right .img").on("mouseover", function () {
				$(this).in();
			});
			$(".m_right .img").on("mouseleave", function () {
				$(".m_right .img").removeIn();
			});
			$(".t_left  .head").on("mouseover", function () {
				$(this).in();
			});
			$(".t_left  .head").on("mouseleave", function () {
				$(".t_left  .head").removeIn();
			});
			//点击导航
			$(".navbox .first").on("click", function () {
				if (!$(this).parent().hasClass("in")) {
					$(".secondbox").slideUp();
					$(".firstbox").removeIn();
					$(this).parent().in();
					$(this).parent().children(".secondbox").slideDown();
					if ($(this).attr("data-url") !== "") {
						$("#iframe").attr("src", $(this).attr("data-url"));
					}
				} else {
					$(this).parent().removeIn();
					$(this).parent().children(".secondbox").slideUp();
				}
			});
			//点击二级菜单
			$(".navbox .second").on("click", function () {
				$(".second").removeIn();
				$(this).in();
				$("#iframe").attr("src", $(this).attr("data-url"));
			});
			//点击左侧的图片
			$(".middle .m_top .item").on("click", function () {
				$(".middle .m_top .item").removeClass("in2");
				$(this).addClass("in2");
				$("#iframe").attr("src", $(this).attr("data-url"));
			});
			//点击头像进入个人中心
			$(".t_left .headbox .head").on("click", function () {
				window.location.href = "personal.html";
			});
		})
		//判断是否需要打开导航
			function isOpenNav(){
				if(first!==""&&first!="undifind"&second!==""&&second!="undifind"){
					$(".m_bottom .firstbox").removeIn();
					$(".m_bottom .firstbox").eq(first-1).in();
					$(".m_bottom .firstbox").eq(first-1).children(".secondbox").slideDown();
					$(".m_bottom .firstbox").eq(first-1).find(".second").removeIn();
					$(".m_bottom .firstbox").eq(first-1).find(".second").eq(second-1).in();
					$("#iframe").attr("src", $(".m_bottom .firstbox").eq(first-1).find(".second").eq(second-1).attr("data-url"));
				}
				
			}
			
			// 获取推荐课程数据
			$.ajax({
				type:"get",
				url:host + "traning/getFavoriteTraning",
				async:true,
				dataType:"json",
				success:function(data){
					console.log(data)
					$.each(data.result,function(index,item){
						// 图片地址
						var showimg = '';
						if(item.imageUrl != null ){
							showimg = 'http://101.201.113.151:9000'+item.imageUrl.split('ROOT')[1] ;
						}
						
						$('#listall').append('<div class="img">'+
						                        '<input type="hidden" value="'+item.id+'" class="videoId">'+
						                        '<img src="'+showimg+'" /></div>')
					
						$('#listall').on('click', '.img', function () {
							var videoId = $(this).children('.videoId').val();
							
							window.open("details_train.html" +"?value="+ videoId);
						})
					})
					
					
					
				},
			})
	</script>
</body>

</html>